<template>
  <div class="empsx1">
    <div class="sq">我的授信</div>
    <div class="empsx2">
      <div class="con_boxs">
        <!-- 搜索 -->
         <el-form
            :inline="true"
            :model="formsx"
            class="demo-form-inline"
            label-width="100px"
          >
            <el-form-item label="银行名称:">
              <el-input placeholder="银行名称" v-model="formsx.bankName" clearable>
              </el-input>
            </el-form-item>
             <el-form-item label="状态:">
             <el-select v-model="formsx.creditStatus" placeholder="状态">
                <el-option label="" value=""></el-option>
                <el-option label="申请中" value="0"></el-option>
                <el-option label="使用中" value="1"></el-option>
                 <el-option label="申请失败" value="2"></el-option>
           
              </el-select>
            </el-form-item>
            <!-- 搜索按钮 -->
            <el-button icon="el-icon-search"  type="primary" @click="shouxinList(formsx)">查询</el-button>
            <el-button type="primary" plain class="gx" @click="shouxinList(formsx)"><img src="../../assets/sx.png" style="width:17px;height:18px"/>更新</el-button>
          </el-form>
        </div>


        <!-- 列表 -->
        <div class="con_table" >
          <el-table :data="tableData" border style="width: 90%;margin: 26px;margin-top: -3px;"  :header-cell-style="{ background: '#f5fafd', color: '#818EA8' }">
            <!-- 列表数据 -->
            <el-table-column prop="account" label="序号">
            </el-table-column>
            <el-table-column prop="bankName" label="银行名称">
            </el-table-column>
            <el-table-column prop="creditStartTime" label="授信周期">
            </el-table-column>
             <el-table-column prop="creditStatus" label="状态">
              <template slot-scope="scope">
                {{
                  scope.row.creditStatus == "0"
                    ? "申请中"
                    : scope.row.creditStatus == "1"
                    ? "使用中"
                    : scope.row.creditStatus == "2"
                    ? "申请失败"
                    : ""
                }}
              </template>
            </el-table-column>
            <el-table-column prop="creditLimit" label="初始额度(万元)">
            </el-table-column>
            <el-table-column
              prop="surplusLimit"
              label="剩余额度(万元)"
            >
            </el-table-column>
            <!-- 列表数据end -->

            <!-- 操作按钮 -->
            <el-table-column fixed="right" label="操作" width="150">
              <template slot-scope="scope">
                <!-- <el-button
                  @click="handleClick(scope.row)"
                  type="primary"
                  size="small"
									round
                  >查看详情</el-button
                > -->
                <el-button type="text" size="small" @click="shenq(scope.row)">申请续额</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 分页 -->
      <div class="block" style="margin-left: 28px;" >
        <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.current"
              :page-sizes="page.PageRange"
              :page-size="page.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            >
            </el-pagination>
      </div>
      <!-- 分页end -->
    </div>
  </div>
</template>
<style >
</style>

<script>
import { querysx, shenq } from "@/api/leagues/app";
export default {
  data() {
    return {
      input: "", //搜索框
      formsx: {},
      // 列表
      tableData: [],
      // 分页
      page: {
        current: 1, //默认从第一页开始
        PageRange: [10, 20, 30], //规定多少个页算一个区间
        total: 0,
        size: 8,
      },
    };
  },
  mounted() {
    this.shouxinList();
  },
  //方法集合
  methods: {
    // 列表操作安钮
    handleClick(row) {
      console.log(row);
      this.$router.push({
        name: "listBiaoGe",
        params: {
          // id: id
        },
      });
    },
    //列表this.formt

    shouxinList: function () {
      // this.formsx.creditStatus = "";
      // this.formsx.bankName = "";
      let params = this.formsx;
      let page = this.page;
      querysx(
        Object.assign(
          {
            current: page.current,
            size: page.size,
          },
          params
        )
      ).then((response) => {
        if (response) {
          var that = this;
          that.tableData = response.data.data.records;
          that.page.size = response.data.data.size;
          that.page.current = response.data.data.current;
          that.page.total = response.data.data.total;

          // that.$message({
          //   duration: 600,
          //   message: "查询成功",
          //   type: "success",
          // });
        } else {
          that.$message.success(response.msg);
        }
      });
    },
    shenq(id) {
      debugger;
      let bankId = id.bankId;
      shenq(bankId).then((data) => {
        if (data) {
          console.log(data.data.msg, "data");
          // this.$message.success(data.data.msg);
        } else {
          that.$message.success(data.data.msg);
        }
      });
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page.current = val;
      this.shouxinList();
      console.log(`当前页: ${val}`);
    },
    PageRangeDate() {
      this.tableData.forEach((ele) => {
        this.PageRange.push(ele.id);
      });
      console.log(this.PageRange, "tab");
    },
    // 分页end
  },
};
</script>
<style>
.empsx1 {
  width: 1200px;
  height: 882px;
  background: #ffffff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.06);
  border-radius: 6px 6px 10px 10px;
  margin: 0 auto;
  position: relative;
  top: 50%;
}

.empsx2 {
  padding-top: 50px;
}

.sq {
  height: 24px;
  font-size: 25px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #051232;
  line-height: 24px;
  padding-top: 33px;
  padding-left: 21px;
}
</style>